<template>
  <div :style="[{'paddingLeft':asideNavWidth}]" style="padding-top:68px" class="container cenLeft">
    <headNav />
    <asideNav v-if="thisRouterSonNav.length" :navList='thisRouterSonNav' ref="asideNav" />
    <div class="main">
      <!-- 导航栏 -->
      <breadcrumb style="margin-bottom: 16px;" />
      <router-view />
    </div>
  </div>
</template>


<script>
import headNav from "@/components/headNav";
import asideNav from "@/components/asideNav";
import breadcrumb from "@/components/breadcrumb";

export default {
  name: "home",
  components: {
    headNav,
    asideNav,
    breadcrumb
  },
  // 监听,当路由发生变化的时候执行
  watch: {
    $route: {
      handler(val, oldVal) {},
      // 深度观察监听
      deep: true
    }
  },
  data() {
    return {
      thisRouterSonNav: [], //当前页面的导航(对应子页面)
      asideNavWidth: 0 //左边宽度
    };
  },
  methods: {
    // 获取当前页面的导航(对应子页面)
    async getThisPageNav() {
      const { isNav = false, sonPage = [] } = this.$route.meta;
      if (isNav) {
        this.thisRouterSonNav = sonPage;
      }
      if (this.thisRouterSonNav.length == 0) {
        this.asideNavWidth = 0;
        return;
      }
      this.sureSideNavWidth();
    },
    // 获取左边导航宽度，
    sureSideNavWidth() {
      if (this.$refs.asideNav) {
        this.asideNavWidth = this.$refs.asideNav.$el.clientWidth + "px";
      }
    }
  }
};
</script>
<style scoped>
.container,
.main {
  width: 100%;
  height: 100%;
}
.main {
  padding: 16px 16px 46px 16px;
  overflow-y: auto;
}
</style>
